<template>
  <div class="headbar ml200" style="background: #03152a"
    :class="$store.state.app.collapse ? 'position-collapse-left' : 'position-left'">
    <!-- 导航收缩 -->
    <span class="hamburg">
      <el-menu class="el-menu-demo" background-color="#03152A" text-color="#fff" active-text-color="#03152A"
        mode="horizontal">
        <el-menu-item index="1" @click="onCollapse">
          <hamburger :isActive="collapse"></hamburger>
        </el-menu-item>
      </el-menu>
    </span>
    <span class="shower">
      <!-- <span class="fa fa-bell"></span> 智感安防区-->
      <!-- <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link> -->
    </span>
    <!-- 导航菜单 -->
    <!-- <span class="navbar">
      <el-menu :default-active="activeIndex" class="el-menu-demo" 
          background-color="#03152A" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar()">
        <el-menu-item index="1" @click="$router.push('/')"><i class="fa fa-home fa-lg"></i>  </el-menu-item>
        <el-menu-item index="2" @click="openWindow('https://gitee.com/liuge1988/kitty')">{{$t("common.projectRepo")}}</el-menu-item>
        <el-menu-item index="3" @click="openWindow('https://gitee.com/liuge1988/kitty/wikis/Home')">{{$t("common.doc")}}</el-menu-item>
        <el-menu-item index="4" @click="openWindow('https://www.cnblogs.com/xifengxiaoma/')">{{$t("common.blog")}}</el-menu-item>
      </el-menu>
    </span>-->
    <!-- 工具栏 -->
    <span class="toolbar">
      <el-menu class="el-menu-demo" background-color="#03152A" text-color="#03152A" active-text-color="#03152A"
        mode="horizontal">
        <el-menu-item index="1">
          <!-- 主题切换 -->
          <!-- <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker> -->
        </el-menu-item>
        <el-menu-item index="2" v-popover:popover-lang>
          <!-- 语言切换 -->
          <!-- <li style="color:#fff;" class="fa fa-language fa-lg"></li>
          <el-popover ref="popover-lang" placement="bottom-start" trigger="click" v-model="langVisible">
            <div class="lang-item" @click="changeLanguage('zh_cn')">简体中文</div>
            <div class="lang-item" @click="changeLanguage('en_us')">English</div>
          </el-popover>-->
        </el-menu-item>
        <el-menu-item index="3" v-popover:popoverMessage>
          <!-- 我的私信 -->
          <!-- <el-badge :value="messages" :max="99" class="badge" type="success">
            <li style="color: #fff" class="fa fa-envelope-o fa-lg"></li>
          </el-badge> -->

          <el-popover ref="popoverMessage" placement="bottom-end" trigger="hover">
            <message-panel></message-panel>
          </el-popover>
        </el-menu-item>
        <!-- 系统通知 -->
        <!-- <el-menu-item index="4" v-popover:popover-notice>
        
          <el-badge :value="4" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-bell-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-notice" placement="bottom-end" trigger="click">
            <notice-panel></notice-panel>
          </el-popover>
        </el-menu-item> -->
        <el-menu-item index="5" v-popover:popover-personal>
          <!-- 用户信息 -->
          <span class="user-info">
            <!-- <img :src="user.avatar" /> -->
            {{ user.name }}
            <i class="el-icon-switch-button"></i>
          </span>
          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
            <personal-panel :user="user"></personal-panel>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </span>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import mock from "@/mock/index";
import Hamburger from "@/components/Hamburger";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import Action from "@/components/Toolbar/Action";
import NoticePanel from "@/views/Core/NoticePanel";
import MessagePanel from "@/views/Core/MessagePanel";
import PersonalPanel from "@/views/Core/PersonalPanel";
export default {
  components: {
    Hamburger,
    ThemePicker,
    LangSelector,
    Action,
    NoticePanel,
    MessagePanel,
    PersonalPanel
  },
  data() {
    return {
      user: {
        name: "",
        avatar: "",
        role: "",
        registeInfo: ""
      },
      activeIndex: "1",
      langVisible: false,
      messages: 0
    };
  },
  mounted() { },
  methods: {
    openWindow(url) {
      window.open(url);
    },
    selectNavBar(key, keyPath) { },
    // 折叠导航栏
    onCollapse: function () {
      this.$store.commit("onCollapse");
    },
    //查询数据数量
    // getMessage() {
    //   this.loading = true;
    //   let that = this;
    //   let params = {
    //     type: 1
    //   };
    //   this.$api.message.sys_message_list(params).then((res) => {
    //     if (res.code == 0) {
    //       this.messages = res.count;
    //     }
    //   });
    // },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit("setThemeColor", themeColor);
    },
    // 语言切换
    changeLanguage(lang) {
      lang === "" ? "zh_cn" : lang;
      this.$i18n.locale = lang;
      this.langVisible = false;
    }
  },
  mounted() {
    this.sysName = "智慧平安社区";
    var userInfo = sessionStorage.getItem("userInfo");
    let user = JSON.parse(userInfo);
    if (user) {
      this.user.name = user.name;
      this.user.avatar = user.avatar;
    }

    // this.getMessage();
  },
  computed: {
    ...mapState({
      themeColor: (state) => state.app.themeColor,
      collapse: (state) => state.app.collapse
    })
  }
};
</script>

<style scoped lang="scss">
.headbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 1px;
  border-left-style: solid;
}

.hamburg,
.navbar {
  float: left;
}

.toolbar {
  float: right;
}

.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}

.user-info {
  font-size: 16px;
  color: #fff;
  cursor: pointer;

  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0px 10px 10px;
    float: right;
  }
}

.badge {
  line-height: 18px;
}

.position-left {
  // left: 200px;
}

.position-collapse-left {
  left: 65px;
}

.shower {
  color: #fff;

  a {
    color: #fff;
  }

  a:hover {
    color: rgb(11, 177, 243);
  }
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

/deep/.el-menu--horizontal>.el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
}
</style>
